<template>
  <!-- 增加记录 -->
  <Dialog title="库存记录" :visible="visible" :loading="loading" :reveal="false" class="two-columns" @close="handleClose">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="8">编号：{{ inventoryData.materialMedicineNo }}</el-col>
        <el-col :span="8">名称：{{ inventoryData.inventoryName }}</el-col>
        <el-col :span="8">类型：{{ inventoryData.inventoryType }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">规格：{{ inventoryData.inventorySpecl }}</el-col>
        <el-col :span="8">单位：{{ inventoryData.inventoryUnit }}</el-col>
        <el-col :span="8">仓库：{{ inventoryData.warehouseName }}</el-col>
      </el-row>
      <el-row class="margin-top mm">
        <el-date-picker v-model="date" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" class="el-date-picker-y" @change="handleDateChange" />
      </el-row>
      <el-row class="margin-top">
        <TypeSelection :data="dataList" :default-value="searchForm.type" :on-change="handleTypeChange" class="TypeSelection" />
      </el-row>
    </div>
    <el-table v-loading="loading" :data="inventoryTableData" border :row-class-name="tableColor">
      <el-table-column label="时间" prop="discrepancyTime" width="140px" />
      <el-table-column label="类型" prop="type" />
      <el-table-column label="单号" prop="no" width="140px" />
      <el-table-column label="操作员" prop="operator" />
      <el-table-column label="变动数量" prop="amount">
        <template slot-scope="scope">
          <span v-if="scope.row.fluctuateType === '增'">+{{ scope.row.amount }}</span>
          <span v-if="scope.row.fluctuateType === '减'">-{{ scope.row.amount }}</span>
          <span v-if="!scope.row.fluctuateType">{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="批次号" prop="inventoryBatch" />
    </el-table>
    <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
  </Dialog>
</template>
<script>
import { TypeSelection, dateToFinalTime, dateToZeroTime } from "@monkey.do/monkey";
import Dialog from "@/components/Dialog/index";
import { tableColor } from '@/utils/common.js';
export default {
  components: {
    Dialog,
    TypeSelection,
  },
  props: {
    inventoryData: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableColor,
      loading: false,
      inventoryTableData: [],
      date: [],
      searchForm: {
        type: "全部",
      },
      dataList: [
        {
          name: "全部",
          id: "全部",
        },
        {
          name: "进货",
          id: "进货",
        },
        {
          name: "冲减",
          id: "冲减",
        },
        {
          name: "领取",
          id: "领取",
        },
        {
          name: "退货",
          id: "退货",
        },
        {
          name: "调入",
          id: "调入",
        },
        {
          name: "调出",
          id: "调出",
        },
        {
          name: "盘盈",
          id: "盘盈",
        },
        {
          name: "盘亏",
          id: "盘亏",
        },
      ],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
    };
  },
  watch: {
    inventoryData: {
      handler(val) {
        console.log(val);
        if (val.id) {
          this.date = [];
          this.searchForm.inventoryId = val.id;
          const date = new Date();
          const dates = date.valueOf() - 30 * 24 * 60 * 60 * 1000;
          this.date.push(this.dateHandle(dates), this.dateHandle(date.valueOf()));
          this.getList();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
    dateHandle(date) {
      const dates = new Date(date);
      const year = dates.getFullYear();
      const month = dates.getMonth() + 1;
      const day = dates.getDate();
      return year + "-" + month + "-" + day;
    },
    async getList() {
      const searchForm = JSON.parse(JSON.stringify(this.searchForm));
      if (searchForm.type === "全部") searchForm.type = undefined;
      searchForm.createdTime = this.date[0] + " 00:00:00" + "_" + this.date[1] + " 23:59:59";
      const res = await this.$api['warehouse/inventory/addOrReduceRecord']({ ...this.params, query: { ...searchForm }});
      if (res.code === 200 && res.data) {
        this.inventoryTableData = res.data.result;
        this.total = res.data.total;
      } else {
        this.inventoryTableData = [];
      }
    },
    handleDateChange(value) {
      console.log(value);
      if (value) {
        const date = new Date(dateToZeroTime(value[0]));
        const dates = new Date(dateToFinalTime(value[1]));
        // const beginTime = date.getFullYear() + "-" + Number(date.getMonth() + 1) + "-" + date.getDate() + " 00:00:00";
        // const endTime = dates.getFullYear() + "-" + Number(dates.getMonth() + 1) + "-" + dates.getDate() + " 23:59:59";
        // this.date = beginTime + "_" + endTime;
        this.date = [];
        this.date.push(date.getFullYear() + "-" + Number(date.getMonth() + 1) + "-" + date.getDate(), dates.getFullYear() + "-" + Number(dates.getMonth() + 1) + "-" + dates.getDate());
        this.getList();
      } else {
        this.date = "";
      }
    },
    handleTypeChange(val) {
      this.searchForm.type = val.name;
      this.getList();
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.margin-top{
  margin:15px 0;
}
// .mm{
//   margin-top: 5px;
// }
.el-col{
  line-height: 25px;
}
.app-search .TypeSelection.m-type-selection /deep/ .el-radio-group .el-radio-button{
  margin-right: 10px;
}
.app-search .TypeSelection.m-type-selection /deep/ .el-radio-group .el-radio-button .el-radio-button__inner{
  width: 65px;
}
</style>
